<template>
  <div class="mine">
    <div class="user">
      <div class="user-header">
        <div class="user-info">
          <div class="head-img">
            <img
              src="	https://x.dscmall.cn/storage/images/1%20-%20%E5%89%AF%E6%9C%AC.jpg
"
              alt=""
            />
          </div>
          <div class="head-desc">
            <div class="user-name">用户名</div>
            <div class="user-grade">
              <span> 等级 </span>
              <span> 成长值0/1001> </span>
            </div>
            <div class="user-line"></div>
          </div>
        </div>
      </div>
      <div class="user-record">
        <div>
          <p>2</p>
          <span>我的收藏</span>
        </div>
        <div>
          <p>2</p>
          <span>我的收藏</span>
        </div>
        <div>
          <p>2</p>
          <span>我的收藏</span>
        </div>
      </div>
      <div class="user-vip">
        <img src="https://x.dscmall.cn/static/dist/img/icon-vip.png" alt="" />
        <div>高级会员</div>
        <span>购物省钱 分享赚钱</span>
        <div class="open">立即开通></div>
      </div>
    </div>
    <div class="user-list">
      <div class="user-item">
        <!-- <div class="item-tit"></div> -->
        <div class="item-cont">
          <div>
            <p>0</p>
            <span>我的团队</span>
          </div>
          <div>
            <p>0</p>
            <span>我的团队</span>
          </div>
          <div>
            <p>0</p>
            <span>我的团队</span>
          </div>
          <div>
            <p>0</p>
            <span>我的团队</span>
          </div>
        </div>
      </div>
      <div class="user-item">
        <!-- <div class="item-tit"></div> -->
        <div class="item-cont">
          <div>
            <p>0</p>
            <span>我的团队</span>
          </div>
          <div>
            <p>0</p>
            <span>我的团队</span>
          </div>
          <div>
            <p>0</p>
            <span>我的团队</span>
          </div>
          <div>
            <p>0</p>
            <span>我的团队</span>
          </div>
        </div>
      </div>
      <div class="user-item">
        <div class="item-tit">
            <div class="item-left">我的订单</div>
            <div class="item-right">全部订单></div>
        </div>
        <div class="item-cont">
          <div>
            <p>0</p>
            <span>我的团队</span>
          </div>
          <div>
            <p>0</p>
            <span>我的团队</span>
          </div>
          <div>
            <p>0</p>
            <span>我的团队</span>
          </div>
          <div>
            <p>0</p>
            <span>我的团队</span>
          </div>
        </div>
      </div>
      <div class="user-item">
        <!-- <div class="item-tit"></div> -->
        <div class="item-cont">
          <div>
            <p>0</p>
            <span>我的团队</span>
          </div>
          <div>
            <p>0</p>
            <span>我的团队</span>
          </div>
          <div>
            <p>0</p>
            <span>我的团队</span>
          </div>
          <div>
            <p>0</p>
            <span>我的团队</span>
          </div>
        </div>
      </div>
    </div>
    <goods-list :list="homeData"/>
  </div>
</template>

<script>
import homeData from "@/mock/homeData.json";

import goodsList from '@/views/home/components/homeIndex/list.vue'
export default {
    components: {
        goodsList
    },
    data () {
        return {
            homeData:homeData.data
        }
    },
    
};
</script>

<style lang="less" scoped>
.mine {
  width: 100%;
  background-color: #f4f4f4;
  .user {
    width: 100%;
    height: 21rem;
    background: linear-gradient(-88deg, #ff4c30, #ea0a21);
    .user-header {
      .user-info {
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 4rem 1.7rem 1.7rem;
        align-items: center;
        .head-img {
          width: 7rem;
          img {
            width: 7rem;
            height: 7rem;
            border-radius: 50%;
          }
        }
        .head-desc {
          margin-left: 1rem;
          flex: 1;
          height: 7rem;
          color: #fff;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .user-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 1.6rem;
            font-weight: 600;
            height: 2rem;
          }
          .user-grade {
            span {
              padding: 0rem 0.8rem;
              border-radius: 1rem;
              font-size: 1.2rem;
              background-color: rgba(0, 0, 0, 0.2);
              margin-right: 1rem;
            }
          }
          .user-line {
            width: 100%;
            height: 2px;
            background: hsla(0, 0%, 100%, 0.5);
          }
        }
      }
    }
    .user-record {
      text-align: center;
      color: #fff;
      display: flex;
      justify-content: space-between;
      div {
        flex: 1;

        p {
          font-size: 1.8rem;
          font-weight: 600;
          margin-bottom: 0.3rem;
        }
      }
      div:not(:nth-of-type(3)) {
        border-right: 1px solid #ccc;
      }
    }
    .user-vip {
      width: calc(100% - 2rem);
      margin: 0 1rem;
      border-radius: 1rem;
      padding: 1rem 2rem;
      background-color: #fff;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 2rem;
      img {
        width: 2rem;
        height: 2rem;
      }
      div {
        font-size: 1.4rem;
      }
      span {
        padding: 0 5rem 0 0;
        color: #805223;
      }
      .open {
        // height: 2rem;
        background-color: pink;
        color: #e3c49e;
        line-height: 2rem;
        text-align: center;
        background-color: #1e1d1b;
        padding: 0.3rem 1rem;
        border-radius: 1rem;
      }
    }
  }
  .user-list {
    width: calc(100% - 2rem);
    margin: 4rem 1rem;
    .user-item {
      width: 100%;
      margin: 1rem 0;
      padding: 1rem;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 1rem;
      .item-tit {
        padding: 1.1rem 0;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .item-cont {
        display: flex;
        justify-content: space-between;
        text-align: center;
        padding: 2rem 0;
        p {
          margin-bottom: 0.5rem;
        }
        span {
        }
      }
    }
  }
}
</style>